<template>
    <view class="contianer">
      <view class="swiper-box">
          <swiper class="swiper" circular @change="change" >
              <swiper-item v-for="(item,index) in props.swiperList" :key="index">
                  <view class="swiper-item uni-bg-red">
                      <image :src="item" class="swiper-img" />
                  </view>
              </swiper-item>
          </swiper>
          <view class="dot">
              <view v-for="(item, index) in props.swiperList.length" :key="'s'+index" :class="['dot_item', current === index ? 'active' : '']" ></view>
          </view>
      </view>
      <view class="content">
          <view class="read">
              <image src="/static/english/english_read_bg.png" class="read-img"/>
              <view class="read-content">
                  <view class="upper flex-row">
                      <view class="left flex-column">
                          <view class="flex-row" style="color: #0AC15D; font-weight: 500;font-size: 32rpx;">
                              <view>课本点读</view>
                              <view class="dimension">正版</view>
                          </view>
                          <span style="font-weight: 400;font-size: 24rpx; color: #0AC15D; margin-top: 8rpx;">小学同步点读书</span>
                      </view>
                      <button open-type="share" class="right">
                        分享到班级群
                      </button>
                  </view>
                  <div class="below">
                      <div class="book_image">
                          <image :src="props.book.cover" class="book_image"/>
                      </div>
                      <div class="introduce">
                          <span style="width:328rpx">{{ props.book.title }}</span>
                          <span style="font-weight: 400;font-size: 24rpx;margin-top: 12rpx;">{{ props.book.description }}</span>
                          <div class="button">
                              <div class="change"  @click="navTO">更换课本</div>
                              <div class="speak" @click="handleRead">开始点读</div>
                          </div>
                      </div>
                  </div>
              </view>
          </view>
          <view class="tab">
              <view :class="['item', activeTab === item.id ? 'active_tab' : '' ]" v-for="item in tab" :key="item.id" @click="handleTab(item.id)">
                  {{ item.title }}
              </view>
          </view>
          <view class="booklist">
              <view class="b_item" v-for="item in booklist" :key="item.id" @click="handleBook(item.id)">
                  <span style="width: 390rpx;margin-top: 28rpx;">{{ item.title }}</span>
                  <view class="preview">
                    <view style="display: flex; align-items: center;">
                          <span >查看</span>
                          <image src="/static/english/arrow.png" class="preview-img"/>
                      </view>
                  </view>
                  <image :src="item.cover" class="book_image"/>
              </view>
          </view>
      </view>
    </view>
  </template>
  
  <script setup>
    import { ref, reactive, onMounted } from 'vue';
    import { hasLogin } from '@/utils/tools';
    import { getBannerApi, getYunDuoBookListApi, getMySelfApi } from '@/apis/index';
    const swiperList = ref([]);
    const current = ref(0);
    // const data = reactive({
    //     book:{
    //         booksId: 1156871,
    //         cover: '/static/chinese/chinese_default_book.jpg',
    //         id: 1335041,
    //         title: '人教-语文-五四制-一年级上册',
    //         description: '一年级上册'
    //     }
    // })
    const tab = ref([
            {id: 4, title: '五四制'},
            {id: 5, title: '六三制'},
    ])
    const booklist = ref([
        {id: 0, title: '人教-英语-新起点-一年级上册', cover: '/static/chinese/chinese_default_book.jpg'},
        {id: 1, title: '人教-英语-新起点-一年级上册', cover: '/static/chinese/chinese_default_book.jpg'},
        {id: 2, title: '人教-英语-新起点-一年级上册', cover: '/static/chinese/chinese_default_book.jpg'}
    ])
    const activeTab = ref(4);
    const props = defineProps({
		book:{
            type: Object,
            default: () => ({})
        },
		swiperList:{
			type: Array,
			default: []
		}
    })
    onMounted(()=>{
        // getBanner();
		getBookList(activeTab.value);
		// getMySelfBook();
    })
    const getMySelfBook = async() =>{
		const { obj } = await getMySelfApi({course: 'chinese'})
		if (obj.length){
			data.book = obj[0]
		}
	}
    const getBanner = async() => {
		const {obj} = await getBannerApi({flag: 2})
		const newValue = [obj.banner1, obj.banner2].filter((item, index) => typeof item !== 'number' && item !== null)
		swiperList.value = newValue;
	}
    const getBookList = async(id) =>{
		const res = await getYunDuoBookListApi({flag: id})
		booklist.value = res.obj;
	}
    const handleTab = (e)=>{
        activeTab.value = e;
        getBookList(e);
	}
    const change = (e)=>{
            current.value = e.detail.current;
    }
    const handleRead =() =>{
        const token = uni.getStorageSync('token');
        if(token){
            uni.navigateTo({
                url: `/pages/web-view/index?data=${encodeURIComponent(JSON.stringify({id:props.book.booksId}))}`
            })
        } else {
            uni.navigateTo({
                url: '/pages/login/index'
            })
        }
    }
    const navTO = ()=>{
		if(hasLogin()){
			uni.navigateTo({
				url: `/pages/select/index?data=${encodeURIComponent(JSON.stringify({course: 'chinese'}))}`
			})
		} else {
			uni.navigateTo({
				url: '/pages/login/index'
			})
		}
	}
	const handleBook = (e)=>{
		if(hasLogin()){
			uni.navigateTo({
				url: `/pages/web-view/index?data=${encodeURIComponent(JSON.stringify({id:e}))}`
			})
		}else{
			uni.navigateTo({
				url: '/pages/login/index'
			})
		}
	}
  </script>
  
  <style lang="scss">
      .contianer{
          width:100vw;
          height: 100vh;
          .swiper-box{
              position: relative;
              .swiper{
                  width:100vw;
                  height: 560rpx;
                  .swiper-item{
                      width:100vw;
                      height: 560rpx;
                      .swiper-img{
                          width:100vw;
                          height: 560rpx;
                      }
                  }
              }
              .dot{
                  position: absolute;
                  width: 100%;
                  bottom: 88rpx;
                  display: flex;
                  flex-direction: row;
                  justify-content: center;
                  align-items: center;
                  :not(:first-child){
                      margin-left: 8rpx;
                  }
                  .dot_item{
                      width: 38rpx;
                      height: 6rpx;
                      background: #FFFFFF;
                      border-radius: 4rpx 4rpx 4rpx 4rpx;
                      opacity: 0.2;
                  }
                  .active{
                      opacity: unset;
                  }
              }
          }
          .content{
              padding-top: 30rpx;
              border-top-right-radius: 40rpx;
              background: #F9FAFE;
              position: relative;
              top: -60rpx;
              display: flex;
              flex-direction: column;
              .read{
                  display: flex;
                  width: 100%;
                  .read-img{
                     width: 708rpx;
                     height: 456rpx;
                     margin-left: 12rpx;
                  }
                  .read-content{
                      position: absolute;
                      width: calc(100% - 70rpx);
                      height: 456rpx;
                      padding-top: 40rpx;
                      padding-left: 70rpx;
                      z-index: 99;
                      .upper{
                          display: flex;
                          flex-direction: row;
                          .left{
                              width: auto;
                              height: auto;
                          }
                          .dimension{
                              width: 88rpx;
                              height: 44rpx;
                              background: rgba(78,197,132,0.2);
                              border-radius: 12rpx 12rpx 12rpx 12rpx;
                              display: flex;
                              justify-content: center;
                              align-items: center;
                              font-weight: 400;
                              font-size: 24rpx;
                              color: #4EC584;
                              margin-left: 24rpx;
                          }
                          .right{
                              width: 184rpx;
                              height: 60rpx;
                              border-radius: 38rpx 38rpx 38rpx 38rpx;
                              border: 2rpx solid #4EC584;
                              display: flex;
                              justify-content: center;
                              align-items: center;
                              font-weight: 400;
                              font-size: 28rpx;
                              color: #4EC584;
                              margin-left: 188rpx;
                              padding-left: unset;
                              padding-right: unset;
                              line-height: unset;
                              background-color: unset;
                              margin-right: unset;
                              box-sizing: unset;
                          }
                      }
                      .below{
                          margin-top: 26rpx;
                          margin-left: 6rpx;
                          display: flex;
                          flex-direction: row;
                          .book_image{
                              width: 192rpx;
                              height: 256rpx;
                              box-shadow: -10rpx 4rpx 8rpx 0rpx rgba(0,75,128,0.2);
                              border-radius: 20rpx;
                              border: 2rpx solid #FFFFFF;
                          }
                          .introduce{
                              margin-left: 34rpx;
                              margin-top: 44rpx;
                              width: 388rpx;
                              font-weight: 500;
                              font-size: 28rpx;
                              color: #FFFFFF;
                              display: flex;
                              flex-direction: column;
                              .speak{
                                  display: flex;
                                  justify-content: center;
                                  align-items: center;
                                  width: 172rpx;
                                  height: 68rpx;
                                  background: linear-gradient( 180deg, #F1CA2E 0%, #EBAC19 100%);
                                  box-shadow: 0rpx 8rpx 20rpx 0rpx #2EAD68;
                                  border-radius: 40rpx 40rpx 40rpx 40rpx;
                                  border: 2rpx solid #FFD649;
                                  font-weight: 400;
                                  font-size: 28rpx;
                                  color: #FFFFFF;
                              }
                              .change{
                                  width: 172rpx;
                                  height: 68rpx;
                                  border-radius: 40rpx 40rpx 40rpx 40rpx;
                                  border: 2rpx solid #FFFFFF;
                                  font-weight: 400;
                                  font-size: 28rpx;
                                  color: #FFFFFF;
                                  display: flex;
                                  justify-content: center;
                                  align-items: center;
                                  margin-right: 14rpx;
                              }
                              .button{
                                  padding-left: 30rpx;
                                  display: flex;
                                  flex-direction: row;
                                  margin-top: 28rpx;
                              }
                          }
                      }
                  }
              }
              .tab{
                  display: flex;
                  flex-direction:row;
                  padding-left: 30rpx;
                  margin-top: 54rpx;
                  :not(:first-child){
                      margin-left: 20rpx;
                  }
                  .item{
                      width: 170rpx;
                      height: 68rpx;
                      background: #FFFFFF;
                      box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.1);
                      border-radius: 40rpx 40rpx 40rpx 40rpx;
                      font-weight: 400;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      font-size: 28rpx;
                      color: #333333;
                  }
                  .active_tab{
                      background: #4EC584;
                      color: #FFFFFF;
                  }
              }
              .booklist{
                  margin-top: 20rpx;
                  display: flex;
                  flex-direction: column;
                  padding-left: 28rpx;
                  padding-right: 32rpx;
                  padding-bottom: 198rpx;
                  .b_item{
                      width: calc(100% - 64rpx);
                      height: 206rpx;
                      background: #FFFFFF;
                      box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.1);
                      border-radius: 60rpx;
                      margin-top: 54rpx;
                      display: flex;
                      justify-content: space-between;
                      align-items: flex-end;
                      flex-direction: column;
                      padding-right: 64rpx;
                      position: relative;
                      .preview{
                          font-weight: 400;
                          font-size: 24rpx;
                          color: #4EC584;
                          width: 390rpx;
                          margin-bottom: 34rpx;
                          .preview-img{
                              width: 24rpx;
                              height: 24rpx;
                              margin-left: 8rpx;
                          }
                      }
                      .book_image{
                          position: absolute;
                          bottom: 0;
                          left: 0;
                          width: 180rpx;
                          height: 240rpx;
                          border-radius: 20rpx;
                          border: 2rpx solid #FFFFFF;
                      }
                  }
              }
          }
      }
  </style>